<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/swiper.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4002669_pgzcltvotc.css" />
    <link rel="stylesheet" href="css/index.css" />
    <title>智慧商城</title>
</head>

<body>
    <div id="app">
        <!-- header -->
        <header>智慧商城</header>

        <!-- search -->
        <div class="search">
            <a href="javascript:;" class="searchCont">
                <i class="iconfont icon-sousuo"></i>
                <p>搜索商品</p>
            </a>
        </div>

        <!-- banner -->

        <div class="banner">

            <!-- swiper -->

            <div class="swiper">

                <!-- ============================= 轮播图 Start =================================== -->

                <div class="swiper-wrapper">

                    <div v-for="item in swiperImgList" class="swiper-slide">

                        <a href=" ">

                            <img :src=item.imgUrl alt="" />             </a>
                    </div>
                </div>

                <!-- ============================= 轮播图 End =================================== -->

                <!--分页器-->

                <div class="swiper-pagination"></div>
            </div>
        </div>

        <!-- 广告 -->
        <div class="ad">
            <i class="iconfont icon-shengyin_shiti"></i>
            <div class="adCont">
                <p>智慧商城2.0全新上线，更多新品等你来选~</p>
            </div>
        </div>

        <!-- ============================= 新品首发 Start =================================== -->
        <div class="main">
            <section class="section1">
                <a v-for="(item,index) in NewGoodsList " href="javascript:;">
                    <div>
                        <img :src="item.imgUrl" alt="" />
                    </div>
                    <p>{{item.text}}</p>
                </a>

            </section>
            <!-- ============================= 新品首发 End =================================== -->

            <section class="section2">
                <a href="javascript:;">
                    <img src="http://cba.itlike.com/public/uploads/10001/20230320/647c6bde4b1f1a3e88955e5f596344f9.png" alt="" />
                </a>
            </section>

            <section class="section3">
                <h2>——&nbsp;&nbsp;猜你喜欢&nbsp;&nbsp;——</h2>

                <!-- ============================= 商品组 Start =================================== -->
                <ul class="section3Ul">
                    <li v-for="item in itemGoodsList">
                        <a href="javascript:;">
                            <img :src="item.goods_image" alt="" />
                            <div class="goodCont">
                                <h3>{{item.goods_name}}</h3>
                                <p class="selled">已售3件</p>
                                <p class="price">¥{{item.line_price_min}}<span>¥{{item.line_price_max}}</span></p>
                            </div>
                        </a>
                    </li>

                </ul>
                <!-- ============================= 商品组 Start =================================== -->
            </section>
        </div>

        <!-- footer -->
        <footer>
            <a href="javascript:;" class="cur">
                <i class="iconfont icon-shouye"></i>
                <p>首页</p>
            </a>
            <a href="javascript:;">
                <i class="iconfont icon-fenlei"></i>
                <p>分类</p>
            </a>
            <a href="javascript:;">
                <i class="iconfont icon-gouwuche"></i>
                <p>购物车</p>
            </a>
            <a href="javascript:;">
                <i class="iconfont icon-wode"></i>
                <p>我的</p>
            </a>
        </footer>
    </div>
</body>
<script src="./js/vue.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/swiper.js"></script>
<script src="./js/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 轮播图
            swiperImgList: [],
            // 新品首发
            NewGoodsList: [],
            // 详细
            itemGoodsList: []
        },
        methods: {
            async getData() {
                return await axios.get('http://smart-shop.itheima.net/index.php?s=/api/page/detail')
            },
            async getSwiper() {
                const res = await this.getData()
                this.swiperImgList = res.data.data.pageData.items[1].data
                console.log(this.swiperImgList)
            }
        },
        async created() {
            const res = await this.getData()
            console.log(res);
            this.NewGoodsList = res.data.data.pageData.items[3].data
            this.itemGoodsList = res.data.data.pageData.items[6].data
            console.log(this.itemGoodsList);
        },

        async mounted() {

            this.getSwiper().then(() => {
                new Swiper('.swiper', {
                    pagination: {
                        el: '.swiper-pagination',

                    },
                    loop: true,
                    autoplay: {
                        delay: 3000,
                        disableOnInteraction: false,

                    },

                });
            });
        }

    })
</script>

</html>